<template>
  <div class="custom-tabs-container">
    <div class="tab-bar" :style="tabBarStyle">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ 'is-active': tab.isActive }"
        @click="selectTab(index)"
      >
        <div class="tab-content"
          ><span>{{ tab.title }}</span></div
        >
      </div>
    </div>
    <div class="tab-content-area">
      <slot :name="selectedTabIndex"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CustomTabs',
    props: {
      tabs: {
        type: Array,
        required: true,
      },
      vertical: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        selectedTabIndex: 0,
        currentTab: {},
      };
    },
    computed: {
      tabBarStyle() {
        if (this.vertical) {
          return {
            display: 'flex',
            flexDirection: 'column',
          };
        }
        return {};
      },
    },
    watch: {
      tabs: {
        handler(newTabs) {
          if (newTabs.length > 0) {
            this.selectTab(this.selectedTabIndex);
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      selectTab(index) {
        this.selectedTabIndex = index;
        this.currentTab = this.tabs[index];
        this.$emit('tab-change', index);
      },
    },
  };
</script>

<style scoped>
  .custom-tabs-container {
    display: flex;
    height: 100%;
  }

  .tab-bar {
    flex: 0.5;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #ccc;
  }

  .tab-item {
    cursor: pointer;
    padding: 10px;
    user-select: none;
  }

  .tab-item.is-active {
    font-weight: bold;
    color: #1890ff;
  }

  .tab-content-area {
    flex: 12;
    padding: 0px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .tab-content {
    display: inline-block;
    vertical-align: middle;
    writing-mode: vertical-rl; /* 文本从右到左垂直显示 */
    text-orientation: mixed; /* 改善字符如汉字的垂直显示 */
    white-space: nowrap;
  }
</style>
